<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'LessonStudent',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/lesson/building'
      })
    }
  }
}
</script>
<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <div :class="gender === '1' ? 'student-boy' : 'student-girl'" :style="cssVar" @click="changePage">
      <div class="student-con">
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <div v-if="annualData.data1 && annualData.data2 && annualData.data3 && annualData.data4" class="mt-10">
            <div class="mt-10">
              <br/>
              <p>人生在勤，不索何获</p>
              <p>品过慢慢耕耘的微苦</p>
              <p>尝过学有所获的微甜</p>
              <p>2024年</p>
              <p>你参与了 <span class="data">{{ annualData.data1 }}</span> 节课的课堂</p>
              <p>累计 <span class="data">{{ annualData.data2 }}</span> 小时</p>
              <p>这其中</p>
              <p>不仅有 <span class="data">{{ annualData.data3 }}</span> 节</p>
              <p>开启美好一天的早八</p>
              <p>亦有 <span class="data">{{ annualData.data4 }}</span> 节</p>
              <p>为你那一天画上圆满句号的晚课</p>
            </div>

<!--            <br/>
            <div class="mt-10">
              <p>此一年，</p>
              <p>你义无反顾地和勤奋作伴。</p>
              <p>于知识的星空中，</p>
              <p>摘取最闪亮的星。</p>
              <p>于学习的海洋中，</p>
              <p>捧出最深蓝的水。</p>
            </div>-->
          </div>

          <!-- 兜底文案 -->
          <div v-else class="mt-10">
              <div class="mt-10">
                <p>人生在勤，不索何获</p>
                <p>莫嫌海角天涯远</p>
                <p>但肯摇鞭有到时</p>
                <p>2024</p>
                <p>你奔赴课堂踩下的脚印</p>
                <p>你在课堂上留下的专心致志的身影</p>
                <p>你在课后对于所学的斟酌模样</p>
                <p>交织成了校园内最美丽的一道华彩</p>
              </div>
            <br/>
<!--            <div class="mt-10">
              <p>你精心地品尝了</p>
              <p>每一个学时的过程，</p>
              <p>同样乐于收获到</p>
              <p>每一分耕耘的成果。</p>
            </div>-->
            <br/>
            <div class="mt-10">
              <p>时间是最好的记录者</p>
              <p>记录了你的成长</p>
              <p>也记录了你苦乐交织的每时每刻</p>
<!--              <p>苦以勉，乐以励，</p>
              <p>但坚毅，无难路。</p>-->
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<style scoped>
.student-boy {
  background: url("../../assets/images/lesson/boy-1.jpg") no-repeat;
  background-size: 100% 100%;
}
.student-girl {
  background: url("../../assets/images/lesson/girl-1.jpg") no-repeat;
  background-size: 100% 100%;
}
.student-con{
  padding: 50px 0px;
}
p {
  color: #3f5d71;
}


</style>
